<template>
  <div class="message-list">
    <div class="message-hd">
      <h1>{{ friendNickname }}</h1>
      <router-link to='/chat/list' class="arrow-wrap">
        <i class="arrow-back"></i>
      </router-link>
      </div>
      <div id="message-box" :style="'height:'+fullHeight+'px;'">
        <ul id="message-list" ref="messageBox">
          <li v-for="list in msgList">
            <p class="time"><span>{{ new Date(list.create_time).getFullYear()+"-"+(new Date(list.create_time).getMonth()+1)+"-"+new Date(list.create_time).getDate()+" "+new Date(list.create_time).getHours()+":"+new Date(list.create_time).getMinutes() }}</span></p>
            <div :class="list.send_user_id == userId?'main self':'main'">
              <img class="photo" :src="list.send_user_id == userId?userHeadImg:friendHeadImg">
              <div class="text">{{ list.content }}</div>
            </div>
          </li>
      </ul>
    </div>
    <div class="message-input">
      <input type="text" class="message-text" ref="message_text" v-model="txtMsgSend">
      <button type="button" class="message-btn" @click="sendMsg">发送</button>
    </div>
  </div>
</template>

<script>
import io from 'socket.io-client'
export default {
  name: "chatWin",
  data() {
    return {
      msgList:[],
      txtMsgSend:"",
      userId:this.getCookie('id'),
      userHeadImg:this.getCookie('head_img'),
      friendId:this.$route.query.friendId,
      friendNickname:this.$route.query.friendNickname,
      friendHeadImg:this.$route.query.friendHeadImg,
      socket_io:io('?user_id='+this.getCookie('id')),
      fullHeight: document.documentElement.clientHeight
    }
  },
  created() {
    if(JSON.stringify(this.$route.query)=='{}'){
      this.$router.push('/chat/list')
    }
    else{
      this.$axios.get('/message/user/list',{params:{token:this.getCookie('userToken'),user_id:this.getCookie('id'),friend_id:this.$route.query.friendId}}).then(reponse=>{
        let res=reponse.data;
        if(res.state===200){
          this.msgList=res.data;
        }
        else if(res.state===500){
          alert(res.msg);
          this.$router.push('/login')
        }
        else{
          alert(res.msg);
        }
      })
    }
  },
  mounted() {
    this.socket_io.on('receiveMessage',(data)=>{
      let date=new Date();
      let nowTime=1900+date.getYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+" "+date.getHours()+":"+date.getMinutes();
      this.msgList.push({
        content:data.content,
        send_user_id:this.user_id,
        create_time:nowTime
      })
    })
    this.get_bodyHeight();
    this.scrollToBottom();

  },
  updated:function(){
    this.scrollToBottom();
  },
  methods:{
    get_bodyHeight () {//动态获取浏览器高度
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
        })()
      }
    },
    scrollToBottom(){
      this.$nextTick(function(){
        var box = this.$el.querySelector('#message-box');
        box.scrollTop = box.scrollHeight
        window.scrollTo(0, box.scrollHeight);
      })
    },
      sendMsg(){
      if(this.txtMsgSend!==""){
        let date=new Date();
        let nowTime=1900+date.getYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+" "+date.getHours()+":"+date.getMinutes();
        this.msgList.push({
          content:this.txtMsgSend,
          send_user_id:this.userId,
          create_time:nowTime
        });
        var data={user_id:parseInt(this.userId),friend_id:parseInt(this.friendId),content:this.txtMsgSend,token:this.getCookie('userToken')};
        this.$axios.post('/message/message',data);
        this.socket_io.emit('sendMessage',data);
        //sockeio
        this.txtMsgSend="";
      }
    }
  }
}
</script>

<style scoped>
  @import "../../static/css/chatWin.css";
</style>
